<template>
  <div class="content">
    <div class="water">
      <div class="water-row">
        <div class="water-box">
          <div class="water-title">
            <p>近5日水质监测情况<i class="gl"></i><i class="gl"></i></p>
          </div>
          <chart :options="chart1" auto-resize></chart>
        </div>
        <div class="water-box">
          <div class="water-title">
            <p>昨日水质监测排行<i class="gl"></i><i class="gl"></i></p>
          </div>
          <table class="water-table">
            <thead>
              <tr>
                <th>名次</th>
                <th>站点</th>
                <th>ORP均值</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in orpRank" :key="item.index">
                <td>{{ item.index }}</td>
                <td>{{ item.name }}</td>
                <td :style="{color:'#0d2dd7'}"><strong>{{item.opr}}</strong></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="water-row">
        <div class="water-box">
          <div class="water-title">
            <p>近15日整体ORP均值图 <i class="gl"></i><i class="gl"></i></p>
          </div>
          <chart :options="chart2" auto-resize></chart>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'waterA',
    data () {
      return {
        chartTheme: {},
        chart1: {
          color:['#00bafa','#9c43ff'],
          tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            data: ['合格', '不合格'],
            top: 20,
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis:  {
            type: 'value',
            axisLine: {lineStyle: {color: '#000237'}},
            splitLine: {lineStyle: {color: 'rgba(0,0,0,.1)'}},
            name: '站点数',
            nameLocation: 'center'

          },
          yAxis: {
            type: 'category',
            data: ['12月1日','12月2日','12月3日','12月4日','12月5日'],
          },
          series: [
            {
              name: '合格',
              type: 'bar',
              stack: '总量',
              barWidth: 24,
              label: {
                normal: {
                  show: true,
                  position: 'insideRight',
                }
              },
              data: [650, 663, 660, 656, 664,],
            },
            {
              name: '不合格',
              type: 'bar',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'insideRight'
                }
              },
              data: [15, 2, 5, 9, 1],

            }
          ]
        },
        chart2: {
          color: ['#0d2dd7','#9d4fff','#7ee5ff','#2b5cdf'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
          },
          legend: {
            show: false
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {show: false},
              data: ['06-21', '06-22', '06-23', '06-24', '06-25', '06-26', '06-27','06-21', '06-22', '06-23', '06-24', '06-25', '06-26', '06-27', '06-27'],
              axisLine: {lineStyle: {color: '#000237'}}
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLine: {lineStyle: {color: '#000237'}},
              splitLine: {lineStyle: {color: 'rgba(0,0,0,.1)'}}
            }
          ],
          series: [
            {
              name: 'ORP',
              type: 'bar',
              barWidth: '25%',
              label: {
                show: true,
                position: 'top'
              },
              data: [320, 332, 301, 334, 390, 236, 314, 320, 332, 301, 334, 390, 236, 314, 314],
            }
          ]
        },
        orpRank: [],
      }
    },
    mounted: function () {
      this.getData()
    },
    methods: {
      getData: function () {
        this.$http('/vqdisplay/waterquality/data')
        .then( response=> {
          let _data = response.data.body  
          this.chart1.yAxis.data = _data.waterQuality5Days.xAxis
          this.chart1.series[0].data = _data.waterQuality5Days.series[1]['合格']
          this.chart1.series[1].data = _data.waterQuality5Days.series[0]['不合格']
          this.orpRank = _data.orpRank
          this.chart2.xAxis[0].data = _data.waterQuality15Days.xAxis
          this.chart2.series[0].data = _data.waterQuality15Days.series[0]['ORP均值']
        })
      }
    }
  }
</script>

<style scoped>
  @import '../../../style/water.css';
  .echarts {
    height: 80%;
    width: 100%;
  }
</style>